<template>
	<view>
		<view  v-if="show">
			<view class="more-share-model" @tap="share()"></view>
			<view class="share-card u-f u-f-column">
				<view>分享到</view>
				<view class="u-f u-f-jsb share-item">
					<view>
						<image src="../static/icon/weixin.png" @tap="beginShare()" class="icon icon-weixin"></image>
						<view class="share-text">微信好友</view>
					</view>
					<view>
						<image class="icon icon-weixin" src="../static/icon/pengyouquan.png" @tap="beginShare()" ></image>
						<view class="share-text">朋友圈</view>
					</view>
					<view>
						<image class="icon icon-QQ" @tap="beginShare()" src="../static/icon/QQ.png"></image>
						<view class="share-text">QQ好友</view>
					</view>
				</view>
				<view @tap="share()">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			show:Boolean
		},
		data() {
			return {
				
			};
		},
		
		methods:{
			share(){
				console.log("分享");
				this.$emit("changeShare");
			},
			beginShare(){
				uni.showToast({
					title: "暂时不能分享哦~",
					icon: "none",
				})
			}
		}
	}
</script>

<style scoped>
.share-card{
	height: 300upx;
	position:fixed;
	bottom:0upx;
	left:0upx;
	right: 0upx;
	background: white;
	z-index: 1100;
}
.more-share-model{
	background:rgba(51, 51, 51, 0.49);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
}
.share-card{
	padding: 40upx 40upx;
}
.share-card>view:nth-child(1),.share-card>view:nth-child(3){
	height: 100upx;
}
.share-card>view:nth-child(2){
	height: 200upx;
	border-bottom: 2upx solid #EEEEEE;
}
.share-card>view:nth-child(1){
	text-align: center;
	font-size: 35upx;
}
.share-card>view:nth-child(3){
	text-align: center;
	font-size: 35upx;
	padding-top: 20upx;
}
.share-item{
	align-items: center;
}
.icon-weixin,.icon-QQ{
	width: 100upx;
	height: 100upx;
	text-align: center;
}
.share-item>view>view:nth-child(2){
	text-align: center;
	color: #626262;
}
.share-text{
	font-size: 25rpx;
}
</style>
